<template>
	<view class="container">
		<tui-navigation-bar @init="initNavigation" :scrollTop="scrollTop" backgroundColor="#fff" color="#222222" :title="pageTitles" :fontWeight="600">
			<view class="tui-header" :style="{ marginTop: navBarTop + 'px' }">
				<view class="get-back dy-iconfont icon-qiehuanqizuo" @click="goBack">
				</view>
			</view>
		</tui-navigation-bar>
		<view class="main">
			<view class="rz-header">
				<view class="name">碰头人入驻</view>
			</view>
			<view class="rz-content">
				<image class="rz-icon" src="https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/empty/rz.png" mode="heightFix"></image>
				<!-- <view class="hite">平台存在技术服务费，详情请查看下方入驻协议</view> -->
				<view class="step">
					<view class="step-c"></view>
					<view class="dotted"></view>
					<view class="step-c basic2"></view>
					<view class="dotted"></view>
					<view class="step-1 basic3"></view>
				</view>
				<view class="container-from">
					<!-- 用户信息表单 -->
					<view class="from-title">基础信息</view>
					<view class="user-form">
						<template v-for="(item,index) in settingList">
							<view class="form-item" :class="{'form-item-head':item.id == 'head'}" @click="openForm(item)" :key="item.id"
								v-if="item.id != 'production' && item.id != 'brief'">
								<view class="title">{{item.name}}</view>
								<view class="value">
									<!-- 年龄 -->
									<view v-if="item.id == 'birthday'" class="receiving">
										<view class="receiving-btn" :data-item="item" @tap.stop.prevent="onBirthday"
											:class="item.status ? 'can-receiving' : 'not-receiving'">
											<view v-if="!item.status" class="receiving-status-no">保密</view>
											<view v-else class="receiving-status-can">公开</view>
										</view>
									</view>
									<text class="twolist-hidden" v-if="item.value && item.id != 'head'">{{item.value}}
										<text v-if="item.unit && item.value">{{item.unit}}</text>
									</text>
									<image class="avatarUrl" v-else-if="item.value && item.id == 'head' && !imgLoding"
										:src="fileList1.length > 0 ? fileList1[0].result.url : item.value" mode="aspectFill">
									</image>
									<text class="value-empty" v-else-if="!item.value">{{item.empty}}</text>
									<text v-if="item.arrow" class="arrow dy-iconfont icon-qiehuanqiyou"></text>
								</view>
							</view>
						</template>
						<view class="form-item form-item-location">
							<view class="title">常驻地址</view>
							<view class="content">常驻地址不会公开展示，仅计算服务距离</view>
							<!-- <view class="location" @tap="openPicker">
								<view class="value" :class="{'resident': resident}">{{resident ? resident : '省、市、区'}}
								</view>
								<view class="dy-iconfont icon-dingwei"></view>
							</view> -->
							<view class="location" @tap="openPicker">
								<view class="value towList-hidden" :class="{'resident': resident}">
									{{resident ? resident : '请选择地址'}}
								</view>
								<view class="dy-iconfont icon-dingwei"></view>
							</view>

							<view class="dashedBorder">
								<uv-textarea height="110rpx" v-model="locationValue" :maxlength="500" placeholder="请填写详细地址，街道、楼牌号等"
									placeholder-style="font-size: 26rpx; font-weight: 400; color: #999B9B;"
									:customStyle="platform == 'ios' ? 'border:none; box-sizing: border-box;padding: 26rpx 26rpx;font-size: 26rpx;':'border:none; box-sizing: border-box;padding: 26rpx 36rpx;font-size: 26rpx;'"></uv-textarea>
							</view>
						</view>
						<view class="form-item form-item-production">
							<view class="title">个人作品/照片/视频</view>
							<view class="content">个人作品/照片/视频将作为公开内容展示给其他用户，您可以上传与个人技能相关的图片/视频或本人照片/视频。</view>
							<uv-upload :fileList="fileList2" name="2" multiple :maxCount="9" :accept="accept" @afterRead="afterReadm" @delete="deletePic"
								@error="uploadErrorm" ref="uploadm" @onPreviewSwiper="onPreviewSwiper" :swiper="true">
								<view class="add-image" @tap="selectMedia" v-if="fileList2.length < 9">
									<uv-icon name="plus" color="#D8D8D8" size="40"></uv-icon>
								</view>
							</uv-upload>
						</view>
						<view class="form-item brief">
							<!-- 简介 -->
							<view class="title-header">
								<view class="title">个人简介</view>
								<view class="introduce"
									@click="checkAgreement('https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/pdf/brief.pdf','简介模版')">
									<text class="dy-iconfont icon-a-17beifen"></text> 查看简介模版
								</view>
							</view>
							<view class="dashedBorder">
								<uv-textarea :height="140" v-model="briefValue" :maxlength="500" placeholder="请输入简介(最多500字)"
									placeholder-style="font-size: 26rpx; font-weight: 400; color: #999B9B;"
									:customStyle="platform == 'ios' ? 'border:none; box-sizing: border-box;padding: 26rpx 26rpx;font-size: 26rpx;':'border:none; box-sizing: border-box;padding: 26rpx 36rpx;font-size: 26rpx;'"></uv-textarea>
							</view>

						</view>
					</view>
					<view class="login-foot">
						<view class="pdCkeckOut" @tap.stop="onAgreement">
							<mycheckbox :check="agreement"></mycheckbox>
						</view>
						<view>
							<text @tap="onAgreement">我已同意</text>
							<text class="agreement" style="color: #396DE8;margin: 0 6rpx;"
								@click="checkAgreement('https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/pdf/enter.pdf','碰头人入驻协议')">
								碰头人入驻协议</text>
						</view>
					</view>
					<button class="btn-primary btn-affirm" @tap.stop.prevent="onAffirm">确认提交</button>
				</view>
			</view>
		</view>
		<uv-popup ref="popup" mode="bottom" :safeAreaInsetBottom="false" round="20">
			<view class="set-popup">
				<view class="header">
					<view class="title">{{pageTitle}}</view>
					<view class="close" @tap="close"><text class="dy-iconfont icon-a-bianzu69"></text></view>
				</view>
				<view class="set-content">
					<!-- <view class="title" v-if="pageSetTitle">{{pageSetTitle}}</view> -->
					<!-- 昵称 -->
					<input v-if="popupID == 'nickname' || popupID == 'wechatNumber'" v-model="setValue" class="uni-input"
						:placeholder="popupID == 'nickname' ? '请输入您的昵称' : '请输入您的微信号'" placeholder-style="font-size: 28rpx; font-weight: 400; color: #999B9B;" />
					<view v-if="popupID == 'nickname'" class="hite">请设置2-24个字符，可由中英文、数字、"_"、"-"组成</view>
					<!-- 性别 -->
					<view class="gender-box" v-else-if="popupID == 'gender'">
						<view class="radio-item" :class="'radio-item-' + index" v-for="(item,index) in genderList.list" :key="item.id"
							@tap.stop.prevent="onSubmit" :data-key="item.name">
							<text>{{item.name}}</text><text v-if="index == genderList.current" class="radio"></text>
						</view>
					</view>
					<!--身高 -->
					<select-ruler v-else-if="popupID == 'stature'" ref="ruler" :min="0" :max="300" :disable="false" :multiple="1" :defaultValue="defaultValue"
						:unit="'cm'" @change="statureChange"></select-ruler>
					<!--体重 -->
					<select-ruler v-else-if="popupID == 'weight'" ref="ruler" :min="0" :max="300" :disable="false" :multiple="1"
						:defaultValue="weightDefaultValue" :unit="'kg'" @change="statureChange"></select-ruler>
					<button v-if="popupID != 'gender'" class="btn-primary btn-submit" @tap.stop.prevent="onSubmit">提交</button>
				</view>
			</view>
		</uv-popup>
		<uv-popup :safeAreaInsetBottom="false" ref="pickerPopup" mode="bottom" round="20">
			<view class="resident-pop">
				<view class="header">
					<view class="title">选择常驻地址</view>
					<view class="close" @tap="closePicker"><text class="dy-iconfont icon-a-bianzu69"></text></view>
				</view>
				<uv-picker ref="picker" :roundArray="2" :columns="addressList" keyName="name" @change="change">
				</uv-picker>
				<view class="btn-box">
					<view class="look" @tap="closePicker">取消</view>
					<button class="btn-primary btn-submit" @tap.stop.prevent="onSubmitPicker">确认</button>
				</view>
			</view>
		</uv-popup>
		<uv-popup ref="submitPopup" :closeOnClickOverlay="false" bgColor="none">
			<reminder title='提交成功' value="提交成功！平台将对您的信息进行审核，审核周期1-2个工作日，请您留意微信消息通知～审核通过您的红包将发至您的钱包账户，请注意查收～"
				image="https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/empty/tc3.png">
				<button class="btn-primary btn-sign" @tap.stop.prevent="sign">确认</button>
			</reminder>
		</uv-popup>
		<uv-popup ref="popupSwiper" mode="center" bgColor="none" overlayOpacity="1">
			<view class="swiper-box-pop">
				<uv-swiper class="banner-d" :pop="true" :current="s_current" bgColor="none" imgMode="widthFix" height="100vh" :list="fileList2"
					keyName="fileUrl" :autoplay="false" @closePop="closePop" @click="clickHandler" @videoPlayOverlay="videoPlayOverlay"></uv-swiper>
			</view>
		</uv-popup>
		<uv-action-sheet ref="actionSheet" round="20" cancelText="关闭" :actions="list" closeOnClickOverlay @select="selectMediaItem">
		</uv-action-sheet>
		<uv-upload :previewImage="false" :fileList="fileList1" name="1" multiple :maxCount="1" accept="image" @afterRead="afterRead" @error="uploadError"
			ref="upload"></uv-upload>
		<uv-toast ref="toast"></uv-toast>
		<survey-pop></survey-pop>
	</view>
</template>

<script>
	import mp from "@/mixins/mp.js";
	import {
		timeFormat
	} from '@/uni_modules/uv-ui-tools/libs/function/index.js';
	import {
		getSexByIdCard,
		getAgeByIdCard
	} from "@/utils/verify.js";
	const app = getApp();

	export default {
		mixins: [mp],
		components: {},
		options: {
			styleIsolation: 'shared'
		}, //解决/deep/不生效**
		data() {
			return {
				navBarOpacity: 0, //标题图标距离顶部距离
				scrollTop: 0.5, //页面滚动高度
				navBarTop: 0, // 导航栏content顶部m-top
				skeletonShow: true,
				pageTitle: '',
				pageTitles: '碰头人入驻',
				pageSetTitle: '',
				//用户头像
				userAvatar: '',
				popupID: '',
				setValue: null,
				imgLoding: false,
				briefValue: '',
				locationValue: '',
				// 身高
				defaultValue: 0,
				// 体重
				weightDefaultValue: 0,
				// 位置
				addressDefaultValue: [],
				agreement: false,
				fileList1: [],
				fileList2: [],
				s_current: 0,
				accept: 'image',
				genderList: {
					list: [{
							name: '男',
							id: 'man'
						},
						{
							name: '女',
							id: 'woman'
						}
					],
					current: 3
				},
				// 菜单列表
				settingList: [{
					id: "nickname",
					name: "昵称",
					value: '',
					arrow: true,
					jurisdiction: true,
					empty: '请填写'
				}, {
					id: "head",
					name: "头像",
					value: '',
					path: '',
					arrow: true,
					jurisdiction: true,
					empty: '请上传'
				}, {
					id: "gender",
					name: "性别",
					value: '',
					arrow: false,
					jurisdiction: true,
					empty: '请选择'
				}, {
					id: "birthday",
					name: "年龄",
					value: '',
					arrow: false,
					status: true,
					jurisdiction: true,
					empty: '获取年龄'
				}, {
					id: "stature",
					name: "身高",
					value: 0,
					arrow: true,
					unit: 'cm',
					jurisdiction: true,
					empty: '选填'
				}, {
					id: "weight",
					name: "体重",
					value: 0,
					unit: 'kg',
					arrow: true,
					jurisdiction: true,
					empty: '选填'
				}, {
					id: "phone",
					name: "手机号",
					value: '',
					arrow: false,
					jurisdiction: true,
					empty: '获取手机号'
				}, {
					id: "wechatNumber",
					name: "微信号",
					value: '',
					arrow: true,
					jurisdiction: true,
					empty: '请填写'
				}],
				list: [{
					name: '图片',
					lable: 'image'
				}, {
					name: '视频',
					lable: 'video'
				}],
				provinces: [], //省
				citys: [], //市
				areas: [], //区
				pickerValue: [0, 0, 0],
				pickeDefaultValue: [3442, 1, 2],
				resident: null,
				register_save: null,
				latitude: 0, // 纬度
				longitude: 0, // 经度
				platform: '',
			};
		},
		/**
		 * 计算属性
		 */
		computed: {
			getCountPicture() {
				return this.fileList2.length;
			},
			addressList() {
				return [this.provinces, this.citys, this.areas];
			}
		},
		onLoad(options) {
			let register = uni.getStorageSync('register');
			let step3 = uni.getStorageSync('step3');
			this.register_save = uni.getStorageSync('register_save');
			// this.settingList[0].value
			if (register) {
				// this.settingList[0].value = register.nickName
				// this.settingList[1].value = register.avatar
				this.settingList[6].value = register.mobile
			}
			if (step3) {
				this.settingList[0].value = step3.nickName
				this.settingList[1].value = step3.avatar2
				this.settingList[1].path = step3.path
				this.settingList[3].status = step3.birthViewState == 1
				this.settingList[4].value = step3.userHeight
				this.settingList[5].value = step3.userWeight
				this.settingList[7].value = step3.wechatNumber
				this.resident = step3.address
				this.locationValue = step3.locationValue
				this.latitude = step3.addressLatitude
				this.longitude = step3.addressLongitude
				this.briefValue = step3.pengIntro
				this.fileList2 = step3.fileList2
			}
			if (this.register_save) {
				this.register_save = Object.assign(this.register_save, {
					sex: getSexByIdCard(this.register_save.userAuth.cardNumber) == '男' ? 'M' : 'W',
					age: getAgeByIdCard(this.register_save.userAuth.cardNumber)
				});
				this.settingList[2].value = getSexByIdCard(this.register_save.userAuth.cardNumber)
				this.settingList[3].value = getAgeByIdCard(this.register_save.userAuth.cardNumber)
			}
		},
		onShow: function() {
			switch (uni.getSystemInfoSync().platform) {
				case 'android':
					this.platform = 'android'
					break;
				case 'ios':
					this.platform = 'ios'
					break;
			}
		},
		/**
		 * 下拉
		 */
		onPullDownRefresh: function() {},
		/**
		 * 触底
		 */
		onReachBottom() {},
		/**
		 * 滚动
		 */
		onPageScroll(res) {
			this.scrollTop = res.scrollTop;
		},
		methods: {

			openForm(item) {
				this.popupID = item.id

				switch (item.id) {
					case 'nickname':
						this.pageTitle = '编辑昵称';
						this.setValue = item.value
						break;
					case 'head':
						this.pageTitle = '上传头像';
						break;
					case 'brief':
						this.pageTitle = '编辑简介';
						break;
					case 'birthday':
						return
					case 'gender':
						this.genderList.current = item.value == '男' ? 0 : item.value == '女' ? 1 : 3
						this.pageTitle = '编辑性别';
						this.pageSetTitle = '编辑你的性别';
						break;
					case 'stature':
						this.pageTitle = '编辑身高';
						this.defaultValue = item.value ? item.value : 0
						break;
					case 'weight':
						this.pageTitle = '编辑体重';
						this.weightDefaultValue = item.value ? item.value : 0
						break;
					case 'address':
						this.pageTitle = '服务地址';
						this.pageSetTitle = '选择服务地址';
						// this.addressDefaultValue.push()
						break;
					case 'wechatNumber':
						this.pageTitle = '编辑微信号';
						this.setValue = item.value
						break;
				}
				if (item.arrow && item.id != 'head') {
					this.$refs.popup.open();
				} else if (item.arrow && item.id == 'head') {
					this.$refs.upload.chooseFile();
				}
			},
			selectMedia() {
				this.$refs.actionSheet.open();
			},
			selectMediaItem(e) {
				this.accept = e.lable
				this.$nextTick(() => {
					this.$refs.uploadm.chooseFile();
				})
			},
			checkAgreement(url, name) {
				let that = this;
				that.$refs.toast.show({
					type: 'loading',
				})
				wx.downloadFile({
					url: url, //文件地址
					success(res) {
						wx.saveFile({ //重点 wx.saveFile一定要有   避免文件存储找不到  然后打开失败
							tempFilePath: res.tempFilePath,
							filePath: wx.env.USER_DATA_PATH + '/' + name + '.pdf',
							success(res) {
								wx.openDocument({
									filePath: res.savedFilePath,
									fileType: "pdf",
									showMenu: true,
									success: function(res) {
										that.$refs.toast.hide()
									},
									fail: function(res) {
										that.$refs.toast.hide()
									},
								})
							}
						})
					},
				})
			},
			onPreviewSwiper(item) {
				this.s_current = item.index
				this.$refs.popupSwiper.open();
			},
			closePop() {
				this.$refs.popupSwiper.close();
			},
			clickHandler(swiper) {
				if (swiper.item.fileType == 'IMAGE') {
					this.closePop()
				}
			},
			videoPlayOverlay(swiper) {
				this.closePop()
			},
			uploadError(e) {

			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				this[`fileList${event.name}`] = []
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				const result = await this.uploadFilePromise(lists[0].url)
				let item = this[`fileList${event.name}`][fileListLen]
				this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
					status: result ? 'success' : 'failed',
					message: result ? '' : '上传失败',
					result: result ? result : '',
				}))
				this.settingList[1].value = event.file[0].thumb ? event.file[0].thumb : this.fileList1[0].result.url
				this.settingList[1].path = this.fileList1[0].result.path
			},


			async afterReadm(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url, lists[i].type, 1)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: result ? 'success' : 'failed',
						message: result ? '' : '上传失败',
						url: !result ? '' : result.coverPictureUrl ? result.coverPictureUrl : result.url,
						path: result ? result.path : '',
						type: result ? result.fileType : '',
						fileType: result ? result.fileType : '',
						fileUrl: result ? result.url : '',
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url, type, loading) {
				if (loading != 1) {
					this.$refs.toast.show({
						type: 'loading',
					})
				}
				return new Promise((resolve, reject) => {
					let header = {}
					if (app.globalData.token) {
						header = {
							token: 'Bearer ' + app.globalData.token,
						}
					}
					let a = uni.uploadFile({
						url: app.globalData.api_root + '/client/file/anyone/upload',
						filePath: url,
						name: 'file',
						formData: {
							storageType: 'TENCENT_COS',
							bucket: 'pengtou-1322587508',
							bizType: type == 'video' ? 'video-frame' : 'send'
						},
						header: header || {},
						success: (res) => {
							setTimeout(() => {
								this.$refs.toast.hide()
								let result = typeof res.data === "object" ? res.data : JSON
									.parse(res.data);
								if (0 == result.code || 200 == result.code) {
									let time = result.data.coverPictureUrl ? 2000 : 200
									setTimeout(() => {
										resolve(result.data)
									}, time)
								} else {
									setTimeout(() => {
										resolve(false);
									}, 200)
								}
							}, 1000)
						},
						fail: (err) => {
							console.log('err', err);
							setTimeout(() => {
								resolve(false);
								this.$refs.toast.hide()
							}, 1000)
						},
					});
				})
			},
			onBirthday() {
				this.settingList[3].status = !this.settingList[3].status
			},
			//文本内容审核  1 资料；2 评论；3 论坛；
			checkMessage(messageContent, scene) {
				this.$refs.toast.show({
					type: 'loading',
				})
				return new Promise((resolve, reject) => {
					app._post_form(
						"/client/input-check/check-message", {
							messageContent: messageContent,
							scene: scene
						},
						(result) => {
							let res = result.data
							this.$refs.toast.hide()
							resolve(res);
						}, null, () => {
							this.$refs.toast.hide()
							resolve(false);
						}
					);
				});
			},
			verifyInput(inputValue) {
				// 2-24个字符，可由中英文、数字、“_”、“-”
				var reg = /^[A-Za-z0-9-_\u4e00-\u9fa5]{2,24}$/;
				if (!reg.test(inputValue)) {
					return false
				} else {
					return true
				}
			},
			async onSubmit(e) {
				if (e.value) {
					this.setValue = e.value
				}
				let check_message = true
				let verifyInput = true
				if (this.popupID == 'nickname') {
					check_message = await this.checkMessage(this.setValue, 1)
					verifyInput = this.verifyInput(this.setValue)

				}
				if (!check_message) {
					this.$refs.toast.show({
						type: 'default',
						message: "请输入合法昵称"
					})
					setTimeout(() => {
						this.$refs.toast.hide()
					}, 1000)
					return
				}
				if (!verifyInput) {
					this.$refs.toast.show({
						type: 'default',
						message: "请输入正确格式的昵称"
					})
					setTimeout(() => {
						this.$refs.toast.hide()
					}, 1000)
					return 'check_message'
				}

				if (this.popupID == 'gender') {
					this.setValue = e.currentTarget.dataset.key
					this.genderList.current = this.setValue == '男' ? 0 : this.setValue == '女' ? 1 : 3
				}
				if (this.popupID == 'address') {
					var address = '';
					for (var i = 0; i < this.addressDefaultValue.length; i++) {
						address += this.addressDefaultValue[i] + ' ';
					}
					this.setValue = address
				}

				if (e.currentTarget && e.currentTarget.dataset && e.currentTarget.dataset.item && e.currentTarget
					.dataset.item.id == 'receiving') {
					this.popupID = e.currentTarget.dataset.item.id
					this.setValue = e.currentTarget.dataset.item.value == 0 ? 1 : 0
				}

				if (this.setValue === "") {
					return
				}
				this.settingList.forEach((item, index) => {
					if (item.id == this.popupID) {
						this.$set(item, 'value', this.setValue)
					}
				})
				this.close()
			},
			close() {
				this.$refs.popup.close();
				this.pageTitle = '';
				this.popupID = '';
				this.pageSetTitle = '';
				this.setValue = null;
			},
			openPicker() {
				wx.chooseLocation({
					success: (res) => {
						this.resident = res.address + " " + res.name;
						this.latitude = res.latitude;
						this.longitude = res.longitude;
					},
					fail: () => {},
					complete: function() {}
				})
			},
			handlePickValueDefault() {
				// 设置省
				this.pickerValue[0] = this.provinces.findIndex(item => Number(item.id) === this.pickeDefaultValue[0]);
				// 设置市
				this.citys = this.provinces[this.pickerValue[0]]?.children || [];
				this.pickerValue[1] = this.citys.findIndex(item => Number(item.id) === this.pickeDefaultValue[1]);
				// 设置区
				this.areas = this.citys[this.pickerValue[1]]?.children || [];
				this.pickerValue[2] = this.areas.findIndex(item => Number(item.id) === this.pickeDefaultValue[2]);
				// 重置下位置
				this.$refs.picker.setIndexs([this.pickerValue[0], this.pickerValue[1], this.pickerValue[2]], true);
			},
			change(e) {
				const {
					columnIndex,
					index,
					indexs
				} = e
				// 改变了省
				if (columnIndex === 0) {
					this.citys = this.provinces[index]?.children || []
					this.areas = this.citys[0]?.children || []
					this.$refs.picker.setIndexs([index, 0, 0], true)
				} else if (columnIndex === 1) {
					this.areas = this.citys[index]?.children || []
					this.$refs.picker.setIndexs(indexs, true)
				}
			},
			closePicker() {
				this.$refs.pickerPopup.close();
			},
			onSubmitPicker() {
				let resident = this.$refs.picker.confirm();
				this.resident = resident.value[0].name + '·' + resident.value[1].name + '·' + resident.value[2].name
				this.closePicker()
			},
			statureChange(e) {
				this.setValue = e
			},
			initNavigation(e) {
				this.navBarOpacity = e.opacity;
				this.navBarTop = e.top;
			},
			onAgreement(value) {
				this.agreement = !this.agreement;
			},
			async onAffirm() {
				let that = this
				if (!that.settingList[0].value) {
					that.$refs.toast.show({
						type: 'default',
						message: "请填写昵称"
					})
					setTimeout(() => {
						that.$refs.toast.hide()
					}, 1000)
					return
				}
				if (!that.settingList[7].value) {
					that.$refs.toast.show({
						type: 'default',
						message: "请填写微信号"
					})
					setTimeout(() => {
						that.$refs.toast.hide()
					}, 1000)
					return
				}
				if (!that.settingList[1].value) {
					that.$refs.toast.show({
						type: 'default',
						message: "请上传头像"
					})
					setTimeout(() => {
						that.$refs.toast.hide()
					}, 1000)
					return
				}
				if (!that.resident || !that.locationValue) {
					that.$refs.toast.show({
						type: 'default',
						message: "请完善常驻地址"
					})
					setTimeout(() => {
						that.$refs.toast.hide()
					}, 1000)
					return
				}
				let location = await that.checkMessage(that.locationValue, 1)
				if (!location) {
					that.$refs.toast.show({
						type: 'default',
						message: "常驻地址含有不合法文字"
					})
					setTimeout(() => {
						that.$refs.toast.hide()
					}, 1000)
					return
				}
				if (that.fileList2.length <= 0) {
					that.$refs.toast.show({
						type: 'default',
						message: "至少需要提交一张照片/视频"
					})
					setTimeout(() => {
						that.$refs.toast.hide()
					}, 1000)
					return
				}
				if (!that.briefValue) {
					that.$refs.toast.show({
						type: 'default',
						message: "请输入简介"
					})
					setTimeout(() => {
						that.$refs.toast.hide()
					}, 1000)
					return
				}

				if (that.briefValue.length < 2) {
					that.$refs.toast.show({
						type: 'default',
						message: "建议您填写相对完整的个人简介哦~"
					})
					setTimeout(() => {
						that.$refs.toast.hide()
					}, 1000)
					return
				}
				let check_message = await that.checkMessage(that.briefValue, 1)
				if (!check_message) {
					that.$refs.toast.show({
						type: 'default',
						message: "个人简介含有不合法文字"
					})
					setTimeout(() => {
						that.$refs.toast.hide()
					}, 1000)
					return
				}
				if (!that.agreement) {
					that.$refs.toast.show({
						type: 'default',
						message: "请同意碰头人入驻协议"
					})
					setTimeout(() => {
						that.$refs.toast.hide()
					}, 1000)
					return
				}
				let pengIntroList = []
				that.fileList2.forEach(item => {
					pengIntroList.push({
						fileUrl: item.path,
						coverPictureUrl: item.url,
					})
				})
				console.log(that.settingList);
				that.register_save = Object.assign(that.register_save, {
					nickName: that.settingList[0].value,
					avatar: that.settingList[1].path,
					userHeight: that.settingList[4].value,
					userWeight: that.settingList[5].value,
					pengIntro: that.briefValue,
					pengIntroList: pengIntroList,
					address: that.resident,
					addressLatitude: that.latitude,
					addressLongitude: that.longitude,
					birthViewState: that.settingList[3].status ? 1 : 0,
					wechatNumber: that.settingList[7].value
				});
				let step3 = that.register_save
				step3.avatar2 = that.settingList[1].value
				step3.path = that.settingList[1].path
				step3.locationValue = that.locationValue
				step3.fileList2 = that.fileList2
				uni.setStorageSync('register_save', that.register_save);
				wx.requestSubscribeMessage({
					tmplIds: ['9olRrQ1IFLyVp1mc09lfymb7xQL7RkzbY26rDMHqZUk',
						'inhNL1YwOXhW1aayoGNTE7U0bsHm7mj04dfK8e7OGhQ'
					],
					success(res) {
						that.onSubmitPop(that.register_save, step3)
					},
					fail(err) {
						that.$refs.toast.show({
							type: 'default',
							message: err.errMsg
						})
						setTimeout(() => {
							that.$refs.toast.hide()
						}, 1000)
					}
				})
			},
			onSubmitPop(register_save, step3) {
				let that = this;
				that.$refs.toast.show({
					type: 'loading',
				})
				app._post_form("/client/peng-register/save", register_save, (res) => {
					uni.setStorageSync('step3', step3);
					this.$refs.submitPopup.open();
				}, false, () => {
					that.$refs.toast.hide()
				})
			},
			openIntroduce(url) {
				app.navigationTo(url);
			},
			sign() {
				app.navigationTo('pages/user/index');
			},
			// 返回上一页
			goBack: function() {
				app.beNavigateBack();
			},
		},
	};
</script>
<style lang="scss" scoped>
	.container {
		min-height: 100vh;
		background: #FFFFFF;
		background-image: url("https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/images/index/server-bg.png");
		background-repeat: no-repeat;
		background-size: 100% 640rpx;

		.pdCkeckOut {
			padding: 15rpx;
			padding-right: 10rpx;
		}

		.dashedBorder {
			width: 100%;
			border-radius: 20rpx;
			overflow: hidden;
			border: 2rpx dashed #C4CFCA;
		}

		.tui-header {
			width: 100%;
			position: fixed;
			top: 0;
			padding: 0 42rpx;
			display: flex;
			align-items: center;
			height: 32px;
			transform: translateZ(0);
			z-index: 99999;
			box-sizing: border-box;

			.get-back {
				flex-shrink: 0;
				width: 36rpx;
				height: 36rpx;
				color: #000;
				font-size: 36rpx;
				padding: 2rpx 40rpx 2rpx 2rpx;
			}
		}

		.main {
			box-sizing: border-box;
			padding: 220rpx 0 36rpx;
			min-height: 100vh;
			position: relative;

			.rz-header {
				box-sizing: border-box;
				padding: 0 280rpx 0 52rpx;

				.name {
					font-size: 48rpx;
					font-weight: 900;
					color: #1E1F1F;
					line-height: 44rpx;
					margin-bottom: 32rpx;
				}

				.title {
					font-size: 22rpx;
					font-weight: 400;
					color: #282D2D;
					line-height: 30rpx;
					margin-bottom: 22rpx;
				}
			}

			.rz-content {
				box-sizing: border-box;
				padding: 38rpx 36rpx 24rpx;
				background: #FFFFFF;
				border-radius: 40rpx 40rpx 0rpx 0rpx;
				position: relative;

				.rz-icon {
					height: 158rpx;
					position: absolute;
					right: 88rpx;
					top: -126rpx;
				}

				.hite {
					font-size: 24rpx;
					font-weight: 400;
					color: #FF4664;
					line-height: 33rpx;
					box-sizing: border-box;
					padding: 10rpx 0rpx 10rpx 17rpx;
					background: rgba(255, 70, 100, 0.1);
					border-radius: 12rpx;
					margin-bottom: 41rpx;

					&::before {
						font-family: "dy-iconfont";
						content: "\e62b";
						font-size: 28rpx;
						padding-right: 7rpx;
						box-sizing: border-box;
					}
				}

				.step {
					display: flex;
					justify-content: center;
					align-items: center;
					margin-bottom: 103rpx;

					.step-1 {
						width: 14rpx;
						height: 14rpx;
						background: #0E0E0D;
						border-radius: 50%;
						border: 8rpx solid #CFCFCF;
						position: relative;

						&::before {
							position: absolute;
							left: 50%;
							bottom: -30rpx;
							transform: translate(-50%, 100%);
							min-width: 150rpx;
							content: "填写入驻信息";
							font-size: 24rpx;
							font-weight: 900;
							color: #282D2D;
							line-height: 33rpx;
							display: block;
						}

						&.basic3 {
							&::before {
								content: "填写基础信息";
							}
						}
					}

					.step-c {
						width: 30rpx;
						height: 30rpx;
						background: #0E0E0D;
						backdrop-filter: blur(10rpx);
						border-radius: 50%;
						position: relative;

						&::after {
							font-family: "dy-iconfont";
							content: "\e61c";
							color: #A7F517;
							font-size: 20rpx;
							position: absolute;
							left: 50%;
							top: 50%;
							transform: translate(-50%, -50%);
						}

						&::before {
							position: absolute;
							left: 50%;
							bottom: -22rpx;
							transform: translate(-50%, 100%);
							min-width: 150rpx;
							content: "上传实名信息";
							font-size: 24rpx;
							font-weight: 900;
							color: #282D2D;
							line-height: 33rpx;
							display: block;
						}

						&.basic2 {
							&::before {
								content: "填写入驻信息";
							}
						}
					}

					.dotted {
						width: 222rpx;
						height: 1rpx;
						border-bottom: 1px dashed #8F8F8F;
						box-sizing: border-box;
					}

					.step-2 {
						width: 20rpx;
						height: 20rpx;
						background: #CFCFCF;
						backdrop-filter: blur(10px);
						border-radius: 50%;
						position: relative;

						&::before {
							position: absolute;
							left: 50%;
							bottom: -63rpx;
							transform: translateX(-50%);
							min-width: 150rpx;
							content: "填写入驻信息";
							font-size: 24rpx;
							font-weight: 900;
							color: #282D2D;
							line-height: 33rpx;
							display: block;
						}
					}

					.step-3 {
						width: 20rpx;
						height: 20rpx;
						background: #CFCFCF;
						backdrop-filter: blur(10px);
						border-radius: 50%;
						position: relative;

						&::before {
							position: absolute;
							left: 50%;
							bottom: -27rpx;
							transform: translate(-50%, 100%);
							min-width: 150rpx;
							content: "填写基础信息";
							font-size: 24rpx;
							font-weight: 900;
							color: #282D2D;
							line-height: 33rpx;
							display: block;
						}
					}
				}
			}
		}

		.container-from {
			display: flex;
			justify-content: center;
			flex-direction: column;
			align-items: center;
			box-sizing: border-box;
			margin-top: 48rpx;

			.from-title {
				font-size: 30rpx;
				font-weight: 900;
				color: #282D2D;
				line-height: 40rpx;
				text-align: start;
				width: 100%;
				margin-bottom: 12rpx;
			}
		}

		.user-avatar {
			position: relative;
			margin-bottom: 17rpx;

			.camera-icon {
				position: absolute;
				width: 62rpx;
				height: 62rpx;
				background: #F6F8F7;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				bottom: -16rpx;
				right: -10rpx;
			}
		}

		.user-form {
			width: 100%;

			.form-item {
				display: flex;
				justify-content: space-between;
				box-sizing: border-box;
				align-items: center;
				padding: 36rpx 0;
				border-bottom: 2rpx solid #E3E9E5;

				&:last-child {
					border: none;
				}

				&.form-item-head {
					padding: 21rpx 0;
				}

				&.brief {
					flex-wrap: wrap;

					.title-header {
						width: 100%;
						margin-bottom: 24rpx;
						display: flex;

						.introduce {
							font-size: 22rpx;
							font-weight: 400;
							color: #396DE8;
							line-height: 30rpx;
							flex-shrink: 0;

							.dy-iconfont {
								font-size: 26rpx;
								margin-right: 8rpx;
							}
						}
					}

					.title {
						width: 100%;
						flex-shrink: 1;
						margin-right: 0;
					}
				}

				&.form-item-production {
					flex-wrap: wrap;
					width: 100%;

					.content {
						font-size: 22rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						color: #999B9B;
						line-height: 30rpx;
						margin: 12rpx 0 24rpx 0;
					}

					.production-list {
						width: 100%;
						height: 230rpx;

						/deep/.scroll-view_H {
							height: 100%;
							display: flex;

							.uni-scroll-view-content {
								display: flex;
							}

							.picture-item {
								position: relative;
								display: flex;
								align-items: center;
								justify-content: center;

								.del-btn {
									position: absolute;
									display: flex;
									top: 10rpx;
									right: 10rpx;
									z-index: 2;
								}
							}

							.picture-item-video {
								margin: 0 auto;
							}

							.picture-image {
								flex-shrink: 0;
								width: 190rpx;
								height: 190rpx;
								margin-right: 20rpx;
								border-radius: 10px;
							}
						}

						.add-image {
							flex-shrink: 0;
							width: 190rpx;
							height: 190rpx;
							background: #FFFFFF;
							border-radius: 16rpx;
							border: 2rpx dashed #C4CFCA;
							margin-top: 20rpx;
							display: flex;
							align-items: center;
							justify-content: center;
						}
					}
				}

				&.form-item-location {
					flex-direction: column;
					align-items: normal;
					width: 100%;

					.content {
						font-size: 22rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						color: #999B9B;
						line-height: 30rpx;
						margin: 12rpx 0 24rpx 0;
					}

					.location {
						border: 2rpx dashed #C4CFCA;
						box-sizing: border-box;
						padding: 26rpx 36rpx;
						border-radius: 20rpx;
						margin-bottom: 16rpx;
						font-size: 26rpx;
						font-weight: 400;
						color: #999B9B;
						line-height: 37rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;

						.value {
							font-size: 26rpx;
							font-weight: 400;
							color: #999B9B;
							line-height: 37rpx;

							&.resident {
								color: #282D2D;
							}
						}
					}
				}

				.add-image {
					flex-shrink: 0;
					width: 190rpx;
					height: 190rpx;
					background: #FFFFFF;
					border-radius: 16rpx;
					border: 2rpx dashed #C4CFCA;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				.title {
					font-size: 28rpx;
					font-weight: 900;
					color: #282D2D;
					line-height: 37rpx;
					flex-shrink: 0;
					margin-right: 80rpx;
				}

				.avatarUrl {
					width: 66rpx;
					height: 66rpx;
					border-radius: 50%;
				}

				.value-empty {
					font-size: 28rpx;
					font-weight: 400;
					color: #999B9B;
					line-height: 37rpx;
				}

				.value {
					font-size: 28rpx;
					font-weight: 400;
					color: #282D2D;
					line-height: 37rpx;
					display: flex;
					align-items: center;

					.arrow {
						font-size: 24rpx;
						line-height: 24rpx;
						color: #BBBCBB;
						margin-left: 20rpx;
					}
				}

				.receiving {
					display: flex;
					align-items: center;
					font-size: 20rpx;
					font-weight: 400;
					color: #282D2D;
					line-height: 28rpx;
				}

				.receiving-btn {
					width: 112rpx;
					height: 48rpx;
					border-radius: 40rpx;
					background: #A7F517;
					box-sizing: border-box;
					padding: 4rpx;
					position: relative;
					margin-right: 9rpx;

					.receiving-status-can {
						position: absolute;
						right: 12rpx;
						top: 50%;
						transform: translateY(-50%);
					}

					.receiving-status-no {
						position: absolute;
						left: 12rpx;
						top: 50%;
						transform: translateY(-50%);
					}

					&::before {
						content: "";
						display: block;
						width: 52rpx;
						height: 40rpx;
						border-radius: 24rpx;
						background: #FFFFFF;
						position: absolute;
						top: 50%;
						transform: translateY(-50%);
					}

					&.can-receiving {
						&::before {
							left: 4rpx;
							transition: all .3;
						}
					}

					&.not-receiving {
						background: #E3E9E5;

						&::before {
							right: 4rpx;
							transition: all .3;
						}
					}
				}
			}
		}

		.login-foot {
			font-size: 22rpx;
			font-weight: 400;
			color: #999B9B;
			line-height: 44rpx;
			margin-right: auto;
			margin-top: -20rpx;
			display: flex;
			align-items: center;
		}

		.btn-affirm {
			// height: 102rpx;
			// line-height: 102rpx;
			margin-top: 36rpx;
		}

		.set-popup {
			background: #F6F8F7;
			box-sizing: border-box;
			padding: 48rpx 24rpx 0;
			position: relative;

			.header {
				display: flex;
				align-items: center;
				justify-content: space-between;
				box-sizing: border-box;
				padding-bottom: 36rpx;

				.title {
					font-size: 32rpx;
					font-weight: 900;
					color: #282D2D;
					line-height: 45rpx;
				}

				.close {
					font-size: 22rpx
				}
			}

			.set-content {
				height: 1000rpx;

				.title {
					font-size: 28rpx;
					font-weight: 400;
					color: #282D2D;
					line-height: 37rpx;
					margin-bottom: 34rpx;
				}

				.gender-box {
					box-sizing: border-box;
					padding: 38rpx;
					font-size: 28rpx;
					font-weight: 900;
					color: #282D2D;
					line-height: 37rpx;
					background: #FFF;
					border-radius: 10rpx;

					.radio-item {
						display: flex;
						justify-content: space-between;
						align-items: center;
					}

					.radio-item-0 {
						margin-bottom: 60rpx;
					}

					.radio {
						&::before {
							font-family: "dy-iconfont";
							content: "\e615";
							font-size: 28rpx;
						}
					}
				}

				.uni-input {
					width: 100%;
					height: 80rpx;
					flex-shrink: 0;
					background: #FFF;
					box-sizing: border-box;
					padding-left: 28rpx;
					border-radius: 10rpx;
					line-height: 80rpx;
					font-size: 28rpx;
				}

				.hite {
					font-size: 24rpx;
					font-weight: 400;
					color: #999B9B;
					line-height: 33rpx;
					margin-top: 24rpx;
				}

				.location {
					display: flex;
					flex-wrap: wrap;
					align-items: center;

					.location-item {
						min-height: 80rpx;
						background: #FFFFFF;
						border-radius: 20rpx;
						border: 2rpx solid #7B867F;
						box-sizing: border-box;
						padding: 17rpx 50rpx;
						font-size: 26rpx;
						font-weight: 400;
						color: #282D2D;
						margin-right: 16rpx;
						margin-bottom: 24rpx;
					}

					.plus {
						display: flex;
						align-items: center;
						justify-content: center;
						border: 2rpx dashed #7B867F;
					}
				}

				.btn-submit {
					position: absolute;
					bottom: 64rpx;
					left: 50%;
					transform: translateX(-50%);
					width: calc(100% - 77rpx + 24rpx);

				}
			}
		}

		.swiper-box-pop {
			width: 100vw;
		}

		.resident-pop {
			background: #FFFFFF;
			box-sizing: border-box;
			padding: 43rpx 31rpx 66rpx;
			position: relative;

			.header {
				display: flex;
				align-items: center;
				justify-content: space-between;
				box-sizing: border-box;
				margin-bottom: 33rpx;

				.title {
					font-size: 32rpx;
					font-weight: 900;
					color: #282D2D;
					line-height: 45rpx;
				}

				.close {
					font-size: 22rpx
				}
			}

			.delete-hint {
				font-size: 32rpx;
				font-weight: 900;
				color: #282D2D;
				line-height: 45rpx;
				margin: 27rpx 0 49rpx 0;
				text-align: center;
			}

			.btn-box {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.look {
					width: calc((100% - 24rpx)/2);
					background: #FFFFFF;
					border-radius: 20rpx;
					border: 2rpx solid #7B867F;
					font-size: 32rpx;
					font-weight: 900;
					color: #999B9B;
					height: 84rpx;
					line-height: 84rpx;
					text-align: center;
				}

				.btn-submit {
					width: calc((100% - 24rpx)/2);
					// height: 102rpx;
					// line-height: 102rpx;
				}
			}
		}
	}
</style>